<template>
  <view class="contents">
    <!-- 头像 -->
    <view class="avatar" v-if="value.user">
      <u-avatar class="zanImg" :src="value.user.avatar_url" @click="goHome"></u-avatar>
    </view>
    <view class="avatarRight">
      <!-- 昵称，时间 -->
      <view class="nickTime">
        <view class="nick">{{ value.user.nick_name }}</view>
        <view class="laoshi" v-if="value.user.is_teacher">老师</view>
        <view class="daoshi" v-if="value.user.is_senators">导师</view>
      </view>
      <!-- 内容 -->
      <view class="detail" v-if="value.grade_auth <= my_level_id">{{ value.content }}</view>
	  <view class="detail_live" v-else>
	  		{{value.content}}
	  		<view class="detail_view" @click="goVip">
          <view>该内容仅支持{{value.grade_auth_name}}及以上行者查看</view>
          <view class="detail_view_icon"><u-icon name="arrow-right" size="24rpx"></u-icon></view>
	  		</view>
	  </view>
	  <view class="plImg" v-if="value.img_url && value.file_type == 10 && value.grade_auth <= my_level_id">
	  	<image :src="value.img_url" mode="" @click="handImg"></image>
	  </view>
	  <view class="item_right_sound" v-if="value.img_url && value.file_type == 20 && value.grade_auth <= my_level_id">
	  	<com-audio :src="value.img_url" color="#000" :way="1"></com-audio>
	  </view>
      <!-- <view class="item_right_sound" v-if="promptSound">
        <progressBar :way="1" color="#444444"></progressBar>
      </view> -->
      <view
        class="reply"
        v-if="reply && value.commentcount_count"
        @click="expand"
      >
        共{{ value.commentcount_count }}条回复
        <u-icon name="arrow-right" color="#55B877"></u-icon>
      </view>
      <view class="time_reply" v-if="reply_one">
        <view class="time_reply_left">
          {{ value.time }} <text @click="handReply">回复</text>
        </view>
        <view
          class="time_reply_right"
          :style="{
            color: value.is_like ? '#55B877' : '#888888',
          }"
          @click="handZan(value.is_like)"
        >
          <image
            class="zanImg1"
            v-show="value.is_like"
            src="@/static/images/slices/icon_tlzxq_dianzan_xuanzhong.png"
          ></image>
          <image
            class="zanImg1"
            v-show="!value.is_like"
            src="@/static/weichuang/icon_fld_dianzan.png"
          ></image>
          <!-- 赞 -->
          {{ value.like_count ? value.like_count : "赞" }}
        </view>
        <!-- <view class="time_reply_right" v-else :style="{
						'color':value.is_like?'#55B877':'#888888'
					}" @click="handZan(1)">
					<image class="zanImg1" src="@/static/weichuang/icon_fld_dianzan.png"></image>
					赞
				</view> -->
      </view>

      <view class="child" v-if="reply">
        <reviewContentChild
          :reply="false"
          :reply_one="true"
          v-for="(item, index) in list"
          :value="item"
          :id="id"
		  :my_level_id="my_level_id"
          :type="type"
          @reply="handReply1"
        >
        </reviewContentChild>

        <view class="child_text" v-if="isNext" @click="nextExpand">
          展开更多
          <u-icon name="arrow-down" color="#888888" size="18"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import progressBar from "@/pages/components/progress_bar.vue"; //录音
import reviewContentChild from "@/pages/detail/reviewContentChild.vue";

// import {
// 	dacheng_hudong_c,
// 	dianzan
// } from '@/common/api/dacheng.js'
import { pinglunChildren, dianzan } from "@/common/api/jiazu.js";
import comAudio from '@/pages/components/audio.vue' //语音条
import {
  huifu_weichuang,
  like_weichuang,
  pinglun_children,
} from "@/common/api/weichuang.js";
export default {
  name: "pinglun",
  components: {
    progressBar,
    reviewContentChild,
	comAudio
  },
  props: {
    isDetail: {
      type: Boolean,
      default: false,
    },
    reply: {
      type: Boolean,
      default: true,
    },
    reply_one: {
      type: Boolean,
      default: true,
    },
    text: {
      type: String,
      default: "说的真好，给你点赞一个！！！",
    },
    promptSound: {
      type: Boolean,
      default: false,
    },
    item_id: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    type: {
      type: Number,
      default: 0,
    },
    id: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
	my_level_id:{
		type: Number,
		default: 0,
	}
  },
  data() {
    return {
      list: [],
      page: 1,
      isNext: false,
    };
  },
  methods: {
    goVip(){
      uni.navigateTo({
	  		url: `/pages/member/index`,
	  	});
    },
	  goHome() {
	  	uni.navigateTo({
	  		url: `/pages/home/home?user_id=${this.value.user.user_id}`,
	  	});
	  },
	  handImg() {
	  	uni.previewImage({
	  	          urls: [this.value.img_url],
	  	          longPressActions: {
	  	            itemList: ["发送给朋友", "保存图片", "收藏"],
	  	            success: function (data) {
	  	              console.log(
	  	                "选中了第" +
	  	                  (data.tapIndex + 1) +
	  	                  "个按钮,第" +
	  	                  (data.index + 1) +
	  	                  "张图片"
	  	              );
	  	            },
	  	            fail: function (err) {
	  	              console.log(err.errMsg);
	  	            },
	  	          },
	  	        });
	  },
    handZan(type) {
      if (this.type == 14 || this.type == 15) {
        dianzan({
          id: this.id,
          type: this.type,
          comment_id: this.value.id,
          user_id: this.value.user_id,
        }).then((res) => {
          console.log("ressssss", res, this.value.is_like);
          if (this.value.is_like == 0) {
            this.value.is_like = 1;
            this.value.like_count += 1;
          } else {
            this.value.is_like = 0;
            this.value.like_count -= 1;
          }
        });
      } else {
        like_weichuang({
          id: this.id,
          type: this.type,
          comment_id: this.value.id,
          user_id: this.value.user_id,
        })
          .then((res) => {
            console.log("ressssss", res, this.value.is_like);
            if (this.value.is_like == 0) {
              this.value.is_like = 1;
              this.value.like_count += 1;
            } else {
              this.value.is_like = 0;
              this.value.like_count -= 1;
            }
          })
          .catch((err) => {});
      }

      // dianzan({
      // 	id:this.id,
      // 	comment_id:this.value.id,
      // 	module_id:this.module_id == 1?9:10,
      // 	like_user_id:this.value.user.user_id
      // }).then(res => {
      // 	if (type == 0) {
      // 		this.value.is_like = 1;
      // 		this.value.like_count += 1;
      // 	} else {
      // 		this.value.is_like = 0;
      // 		this.value.like_count -= 1;
      // 	}
      // })
    },
    expand() {
      this.list = [];
      // dacheng_hudong_c({
      // 	id:this.value.id,
      // 	page:this.page
      // }).then(res => {
      // 	this.list.push(...res.data.list.data)
      // 	if (this.list.length < res.data.list.total) {
      // 		this.isNext = true;
      // 	} else {
      // 		this.isNext = false;
      // 	}
      // })
      this.getChildList();
    },
    getChildList() {
      if (this.type == 14 || this.type == 15) {
        pinglunChildren({
          comment_id: this.value.id,
          type: this.type,
          page: this.page,
        }).then((res) => {
          console.log("ressssss", res);
          this.list.push(...res.data.list.data);
          if (this.list.length < res.data.list.total) {
            this.isNext = true;
          } else {
            this.isNext = false;
          }
        });
      } else {
        pinglun_children({
          comment_id: this.value.id,
          type: this.type,
          page: this.page,
        }).then((res) => {
          console.log("ressssss", res);
          this.list.push(...res.data.list.data);
          if (this.list.length < res.data.list.total) {
            this.isNext = true;
          } else {
            this.isNext = false;
          }
        });
      }
    },
    //展开更多
    nextExpand() {
      this.page += 1;
      this.getChildList();
    },
    handReply(item) {
      this.$emit("reply", this.value, this.index);
    },
    handReply1(item) {
      this.$emit("replyC", item, this.value, this.index);
    },
  },
};
</script>
<style scoped lang="scss">
.contents {
  margin-top: 27rpx;
  display: flex;
  margin-top: 32rpx;
  .avatar {
    width: 72rpx;
    height: 72rpx;

    .zanImg {
      border-radius: 36rpx;
      width: 72rpx;
      height: 72rpx;
    }
  }

  .avatarRight {
    width: 100%;

    padding-left: 16rpx;
    box-sizing: border-box;

    .nickTime {
      display: flex;
      // justify-content: space-between;
      line-height: 36rpx;

      .nick {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }
      .zhiding {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #55b877;
      }
      .time {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }
      .laoshi{
        font-size: 24rpx;
        background: #ffe9ce;
        color: #ffbb69;
        padding: 2rpx 12rpx;
        margin: 0 10rpx;
        box-sizing: border-box;
      }
      .daoshi{
        font-size: 24rpx;
        background: #efe0ff;
        color: #cda1ff;
        padding: 2rpx 12rpx;
        margin: 0 10rpx;
        box-sizing: border-box;
      }
    }

    .detail {
      line-height: 42rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      color: #444444;
    }
	
	.detail_live {
		width: 592rpx;
		height: 132rpx;
		line-height: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #444444;
		word-wrap: break-word;
		position: relative;
		.detail_view {
			width: 100%;
			height: 132rpx;
			background: linear-gradient(360deg, #FFFFFF 51%, rgba(255,255,255,0) 100%);
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #444444;
      .detail_view_icon{
        position: relative;
        margin-top: 4rpx;
      }
		}
	}

    .reply {
      width: 100%;
      padding: 10rpx 24rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 400;
      background: #eeeeee;
      color: #55b877;
      display: flex;
      margin-top: 16rpx;
    }

    .time_reply {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 16rpx;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #eeeeee;
      margin-bottom: 32rpx;

      .time_reply_left {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888888;
        display: flex;
        margin-top: 16rpx;
        .time_reply_left_right {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #55b877;
          margin-left: 24rpx;
        }
        text {
          margin-left: 8rpx;
        }
      }

      .time_reply_right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888888;

        .zanImg1 {
          width: 25rpx;
          height: 27rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

.item_right_sound {
  background: #f7f8fa;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-top: 16rpx;
}
.child {
  width: 100%;
  .child_text {
    color: #888888;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    padding-bottom: 40rpx;
  }
}
.plImg {
		width: 100%;
		margin-top: 16rpx;
		image {
			width: 222rpx;
			height: 222rpx;
			
		}
	}
</style>